<template>
  <div class="homeContent">
    <div class="imgDiv">
      <img src="../../assets/images/Home/banner2.jpg" />
    </div>
    <div class="content-block statisticDiv">
      <div
        v-for="(item, index) in statisList"
        :key="index"
        class="smallStatistic"
      >
        <div class="itemTop-icon" :class="'icons' + index"></div>
        <div class="itemTop-name">{{ item.name }}</div>
        <div class="itemTop-num">{{ item.num }}</div>
      </div>
    </div>
    <div
      v-for="(item, index) in dataList"
      :key="index"
      class="content-block alarm"
      @click="goTo(item.url)"
    >
      <div class="item-icon" :class="'icon' + index"></div>
      <div class="item-name">{{ item.name }}</div>
      <icon name="arrow" />
    </div>
    <div>{{ code }}</div>
    <div>{{ state }}</div>
  </div>
</template>

<script>
import { Icon } from "vant";
import { getMobileStatisticsOfIndex, weChatLogin } from "@/api/home";

export default {
  name: "overview",
  components: {
    Icon
  },
  data() {
    return {
      code: '',
      state: '',
      hasAuthority: false,
      statisList: [
        {
          name: "设备总数",
          num: ""
        },
        {
          name: "当前告警",
          num: ""
        },
        {
          name: "在线设备",
          num: ""
        }
      ],
      dataList: [
        {
          name: "告警信息",
          url: "/home/alarm"
        },
        {
          name: "统计信息",
          url: "/home/statistics"
        },
        {
          name: "处置上报",
          url: "/home/report"
        },
        {
          name: "一号楼",
          url: "/home/onePage"
        },
        // {
        //   name: "更多服务",
        //   url: ""
        // }
      ]
    };
  },
  mounted() {
    this.getIndexData();
  },
  methods: {
    async getIndexData() {
      let res = await getMobileStatisticsOfIndex();
      if (res.code === 0) {
        this.statisList[0].num = res.data.euqipmentCount;
        sessionStorage.setItem("euqipmentCount", res.data.euqipmentCount);
        this.statisList[1].num = res.data.alarmCount;
        this.statisList[2].num = res.data.euqipmentOnlineCount;
      }
    },
    goTo(url) {
      this.$router.push(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.homeContent {
  .imgDiv {
    text-align: center;
    margin: 15px 15px 15px 15px;
    @media screen and (max-width: 320px) {
      margin: 10px 10px 10px 10px;
    }
    img {
      display: block;
      max-width: 100%;
      border-radius: 20px;
    }
  }
  .statisticDiv {
    display: flex;
    justify-content: space-between;
    .smallStatistic {
      width: 90px;
      height: 110px;
      .itemTop-icon {
        width: 60px;
        height: 60px;
        background-image: url("../../assets/images/Home/mainPageThree.png");
        background-size: 300%;
        margin: 0 auto;
      }
      .icons0 {
        background-position: 0 0;
      }
      .icons1 {
        background-position: -60px 0;
      }
      .icons2 {
        background-position: -120px 0;
      }
      .itemTop-name {
        font-size: 12px;
        text-align: center;
      }
      .itemTop-num {
        font-size: 24px;
        font-weight: 600;
        text-align: center;
      }
      @media screen and (max-width: 320px) {
        height: 86px;
        .itemTop-num {
          font-size: 18px;
        }
        .itemTop-icon {
          width: 46px;
          height: 46px;
        }
        .icons1 {
          background-position: -46px 0;
        }
        .icons2 {
          background-position: -92px 0;
        }
      }
    }
  }
  .alarm {
    position: relative;
    color: #333;
    overflow: hidden;
    .item-icon {
      float: left;
      width: 54px;
      height: 52px;
      background-image: url("../../assets/images/Home/mainPageIcon.png");
      background-size: 400%;
      margin-left: 15px;
    }
    .icon0 {
      background-position: 0 0;
    }
    .icon1 {
      background-position: -54px 0;
    }
    .icon2 {
      background-position: -109px 0;
    }
    .icon3 {
      background-position: -162px 0;
    }
    .item-name {
      float: left;
      margin-left: 50px;
      width: 110px;
      line-height: 50px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 7px;
    }
    /deep/ .van-icon {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translate(0, -50%);
      font-size: 30px;
    }
    @media screen and (max-width: 320px) {
      .item-icon {
        width: 40px;
        height: 39px;
      }
      .icon1 {
        background-position: -40px 0;
      }
      .icon2 {
        background-position: -81px 0;
      }
      .item-name {
        margin-left: 32px;
        font-size: 16px;
        line-height: 40px;
      }
      /deep/ .van-icon {
        right: 26px;
        font-size: 22px;
      }
    }
  }
}
</style>
